<template>
	<view class="content">
		<view class="aooo">
			<view class="all">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
					<image class="anchor" src="../../static/imges/bg_yellow.png" mode=""></image>
				</picker>
				<picker class="aoot" @change="bindPickerChange2" :value="index2" :range="att">
					<view class="uni-input">{{att[index2]}}</view>
					<image class="anchor" src="../../static/imges/bg_yellow.png" mode=""></image>
				</picker>
				<picker class="aoot" @change="bindPickerChange3" :value="index3" :range="arr">
					<view class="uni-input">{{arr[index3]}}</view>
					<image class="anchor" src="../../static/imges/bg_yellow.png" mode=""></image>
				</picker>
				<picker class="aoot" @change="bindPickerChange4" :value="index4" :range="attr">
					<view class="uni-input">{{attr[index4]}}</view>
					<image class="anchor" src="../../static/imges/bg_yellow.png" mode=""></image>
				</picker>
			</view>
		</view>
		<view class="bott"></view>
		<view class="botteer" @click="parent">
			<image class="box" src="../../static/imges/details1.png" mode=""></image>
			<view class="lian">
				<view class="box4">大厦名称</view>
				<view class="box5">近30天共有108人关注</view>
				<view class="box6" style="margin-left: 10rpx;color: #027FC5;">雨花区·芙蓉中路雨花亭</view>
				<view class="butde">
					<text style="font-weight: 600;">￥4300</text><text class="box7">万元/月</text>
				</view>
			</view>
		</view>

		<view class="botteer" @click="parent">
			<image class="box" src="../../static/imges/details1.png" mode=""></image>
			<view class="lian">
				<view class="box4">泰禹云开壹品</view>
				<view class="box5">近30天共有108人关注</view>
				<view class="box6" style="margin-left: 10rpx;color: #027FC5;">雨花区·芙蓉中路雨花亭</view>
				<view class="butde">
					<text style="font-weight: 600;">￥4300</text><text class="box7">万元/月</text>
				</view>
			</view>
		</view>


		<view class="botteer" @click="parent">
			<image class="box" src="../../static/imges/details1.png" mode=""></image>
			<view class="lian">
				<view class="box4">泰禹云开壹品</view>
				<view class="box5">近30天共有108人关注</view>
				<view class="box6" style="margin-left: 10rpx;color: #027FC5;">雨花区·芙蓉中路雨花亭</view>
				<view class="butde">
					<text style="font-weight: 600;">￥4300</text><text class="box7">万元/月</text>
				</view>
			</view>
		</view>

		<view class="botteer" @click="parent">
			<image class="box" src="../../static/imges/details1.png" mode=""></image>
			<view class="lian">
				<view class="box4">泰禹云开壹品</view>
				<view class="box5">近30天共有108人关注</view>
				<view class="box6" style="margin-left: 10rpx;color: #027FC5;">雨花区·芙蓉中路雨花亭</view>
				<view class="butde">
					<text style="font-weight: 600;">￥4300</text><text class="box7">万元/月</text>
				</view>
			</view>
		</view>


		<view class="botteer" @click="parent">
			<image class="box" src="../../static/imges/details1.png" mode=""></image>
			<view class="lian">
				<view class="box4">泰禹云开壹品</view>
				<view class="box5">发布时间:2020-03-22 23:00</view>
				<view class="box6" style="margin-left: 10rpx;color: #027FC5;">雨花区·芙蓉中路雨花亭</view>
				<view class="butde">
					<text style="font-weight: 600;">￥4300</text><text class="box7">万元/月</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				array: ['区域', '长沙', '株洲', '湘潭'],
				att: ['面积', '100m²', '120m²', '140m²'],
				arr: ['价格', '100万', '120万', '140万'],
				attr: ['装修', '豪装', '精装', '普装', '简装'],
				index: 0,
				index2: 0,
				index3: 0,
				index4: 0
			};
		},
		computed: {

		},
		onLoad() {},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.target.value
				console.log(e.target);
			},
			bindPickerChange2: function(e) {
				this.index2 = e.target.value
			},
			bindPickerChange3: function(e) {
				this.index3 = e.target.value
			},
			bindPickerChange4: function(e) {
				this.index4 = e.target.value
			},
			parent(){
				uni.navigateTo({
					url:'./BuildingDetails'
				})
			}
		}
	};
</script>

<style>


	.all {
		width: 100%;
		height: 70rpx;
		display: flex;
		text-align: center;
		margin-left: 6%;
	}

	.anchor {
		width: 30rpx;
		height: 30rpx;
		position: relative;
		top: -10rpx;
		margin-left: 50rpx;
	}

	.aooo {
		position: fixed;
		z-index: 999;
		background-color: #FFFFFF;
		width: 100%;
		height: 80rpx;
	}

	.aoot {
		margin-left: 100rpx;
	}

	picker {
		width: 75rpx;
	}

	.uni-input {
		width: 130rpx;
		text-align: center;
	}

	.bott {
		width: 100%;
		height: 30rpx;
		background-color: #F4F4F4;
		position: relative;
		top: 90rpx;
	}

	.box {
		width: 250rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.botteer {
		display: flex;
		justify-content: space-between;
		position: relative;
		top: 100rpx;
		margin: 30rpx 20rpx 0 20rpx;
		height: 230rpx;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.box6,
	.box7 {
		font-size: 12rpx;
		margin-top: 20rpx;
	}

	.box5 {
		font-size: 26rpx;
		margin-top: 15rpx;
		color: #BCBCBC;
	}

	.butde {
		margin-top: 15rpx;
		color: #C92B29;
	}

	.lian {
		width: 330rpx;
		margin-right: 100rpx;
	}
</style>
